<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style type="text/css">
body {
	background-image: url(111.jpg);
	background-repeat: no-repeat;
}
body,td,th {
	font-size: 20px;
}
tubord{
	padding:200px;
	padding-left:200px;}
</style>
</head>
<body onload="test()">
<div class="tubord">
<img src="" id="img1" width="200" height="300"/>
<img src="" id="img2" width="200" height="300"/>
<img src="" id="img3" width="200" height="300"/>
</div>
<script>

    function test() {
        var images = ['images/01.jpg', 'images/02.jpg', 'images/03.jpg', 'images/04.jpeg', 'images/05.jpg', 'images/06.jpg', 'images/07.jpg', 'images/08.jpg', 'images/09.jpg'];
        var img1 = document.getElementById('img1');
        var img2 = document.getElementById('img2');
        var img3 = document.getElementById('img3');

        
        var imgs = [];
        imgs.push(img1);
        imgs.push(img2);
        imgs.push(img3);
        
        for (var index1 = 0; index1 < imgs.length; index1++) {
            var index = Math.floor(Math.random() * images.length);
            imgs[index1].src = images[index];
        }
        console.log(index);
    }

</script>
</body>
</html>

